// 综合分析界面底部饼图
// 从左向右 图四
<template>
    <div class="pie-chart" ref="pie">   
    </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'

export default {
    data(){
        return{
            chart:null
        }
    },
    mixins:[echartMixins],
    mounted(){
        this.draw()
    },
    methods:{
        draw(){
            this.chart = this.$echarts.init(this.$refs.pie)
            let option = {
                // 弹出标签
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    textStyle: {
                        fontSize: 8,
                    },
                    extraCssText: 'background-color: rgba(64,158,255,0.3)'
                },
                // 图例
                legend: {
                    orient: 'vertical',
                    icon: 'circle',
                    left: 160,
                    top: 40,
                    data: ['占用', '空闲', '异常'],
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',   
                    },
                },
                series: [
                    {
                        left: '-30%',
                        name: '状态',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter:function (argument) {
                                var html;
                                html='女厕\r\n\r\n'+'300';
                                return html;
                            },
                            textStyle:{
                                fontSize: 15,
                                color:'#fff',
                            }
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '20',
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 150, name: '空闲'},
                            {value: 142, name: '占用'},
                            {value: 8, name: '异常'},
                        ]
                    }
                ],
                color:[
                    '#37a2da','#67c23a','#67e0e3','#ffdb5c', '#e062ae','#ff9f7f','#e062ae'
                ]    
            }
            this.chart.setOption(option)
        } 
    }
}
</script>

<style lang="scss" scoped>
.pie-chart{
    width: 100%;
    height: 100%;
}
</style>